<!-- 自定义gl_Inputnum计数器组件 -->

<template>
    <div class="gl_inputnum">
        <button @click="minus">-</button>
        <input type="text" :value="counter_num" disabled />
        <button @click="add">+</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            counter_num: this.value, // 计数
            min_num: this.min, // 最小值
            max_num: this.max // 最大值
        }
    },
    props: ['min', 'max', 'value'],
    methods: {
        minus() {
            if (this.counter_num <= this.min_num) {
                this.counter_num = this.min_num
            } else {
                this.counter_num--
            }
        },
        add() {
            if (this.counter_num >= this.max_num) {
                this.counter_num = this.max_num
            } else {
                this.counter_num++
            }
        }
    },
    watch: {
        counter_num(newVal) {
            // console.log(newVal)
            this.$emit('input', newVal)
        }
    }
}
</script>

<style scoped>
.gl_inputnum {
    /* width: 120px; counter组件的宽 */
    /* height: 24px; counter组件的高=上面的width*34行width对应的百分比 */
    position: absolute;
    border-radius: 2px;
}
.gl_inputnum:hover {
    box-shadow: 0 0 0 0.5px #409eff;
}
.gl_inputnum > button {
    width: 20%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    outline: none;
    cursor: pointer;
    background: #f5f7fa;
    border-radius: 2px;
}
.gl_inputnum > button:active {
    background: #ffffff;
}
.gl_inputnum > button:hover {
    color: #409eff;
}
.gl_inputnum > input {
    width: 60%;
    height: 100%;
    float: left;
    box-sizing: border-box;
    outline: none;
    border: 1px solid #dcdfe6;
    text-align: center;
    border-left: 0;
    border-right: 0;
    background: #fff;
}
</style>
